{% include 'admin/header.html' %}

<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      {% include 'admin/nav.html' %}

      <main class="lyear-layout-content">
        <div class="container-fluid">
          <!-- 提示信息 -->
          <div class="alert alert-info" role="alert">
            请选择宿舍和月份，然后计算水电费用。
          </div>

          <!-- 卡片标题部分 -->
          <div class="card shadow-sm">
            <header class="card-header d-flex justify-content-between align-items-center">
              <h4 class="card-title mb-0 text-primary">水电费用计算</h4>
              <div>
                <a href="{{ url_for('main.query_utility_fee') }}" class="btn btn-outline-primary btn-sm">返回费用列表</a>
              </div>
            </header>

            <!-- 卡片内容 -->
            <div class="card-body">
              <form action="{{ url_for('main.calculate_utility_fee') }}" method="POST">
                <!-- 宿舍选择 -->
                <div class="form-group mb-3">
                  <label for="dorm_id" class="form-label">选择宿舍</label>
                  <select id="dorm_id" name="dorm_id" class="form-control">
                    <option value="">所有宿舍</option>
                    {% for dorm_id, dorm_name in dorm_dict.items() %}
                      <option value="{{ dorm_id }}" {% if dorm_id == request.form.dorm_id %}selected{% endif %}>{{ dorm_name }}</option>
                    {% endfor %}
                  </select>
                </div>

                <!-- 月份选择 -->
                <div class="form-group mb-3">
                  <label for="month" class="form-label">选择月份</label>
                  <input type="month" id="month" name="month" class="form-control  w-auto" value="{{ selected_month }}" required>
                </div>

                <!-- 提交按钮 -->
                <div class="d-flex justify-content-between">
                  <button type="submit" class="btn btn-success">计算费用</button>
                  <a href="{{ url_for('main.query_utility_fee') }}" class="btn btn-outline-secondary">返回列表</a>
                </div>
              </form>
            </div>
          </div>

          <!-- 费用列表 -->
          {% if utility_fees %}
          <div class="card shadow-sm mt-4">
            <header class="card-header d-flex justify-content-between align-items-center">
              <h4 class="card-title mb-0 text-primary">费用列表</h4>
            </header>
            <div class="card-body">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>宿舍名称</th>
                    <th>水费</th>
                    <th>电费</th>
                    <th>总费用</th>
                  </tr>
                </thead>
                <tbody>
                  {% for fee in utility_fees %}
                  <tr>
                    <td>{{ dorm_dict[fee.dorm_id] }}</td>
                    <td>{{ fee.water_fee | round(2) }}</td>
                    <td>{{ fee.electricity_fee | round(2) }}</td>
                    <td>{{ fee.total_fee | round(2) }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          {% else %}
          <div class="alert alert-warning mt-3" role="alert">
            暂无费用记录。
          </div>
          {% endif %}
        </div>
      </main>
    </div>
  </div>

{% include 'admin/footer.html' %}
</body>
